import React, { useState } from "react";
import './index.css'
import { Form, Input, Upload, message, Button, DatePicker, Space } from 'antd';
import { getaddlist } from '@/api'
import { UploadOutlined } from '@ant-design/icons';

function onOk(value) {
  console.log(value);
}

function CreateLivePage() {
  const [title, settitle] = useState('');
  const [name, seatname] = useState('');
  const [createtime, settime] = useState('');
  const [others, setothers] = useState('');
  const [img, setimg] = useState('');
  const onChange = (value, dateString) => {
    console.log('Selected Time: ', value);
    settime(dateString);
  }

  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file.name, info.fileList);
        
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };


  return <div>
    <p>创建直播间</p>
    {/* 直播标题 */}
    <Form.Item
      name={['user', 'NameList']}
      label="直播标题"
      rules={[
        {
          required: true,
        },
      ]}
    >
      <Input onChange={(e) => {
        settitle(e.target.value)
      }} />
    </Form.Item>
    {/* 直播人 */}
    <Form.Item
      name={['user', 'Name']}
      label="直播人"
      rules={[
        {
          required: true,
        },
      ]}
    >
      <Input onChange={(e) => {
        seatname(e.target.value)
      }} />
    </Form.Item>
    {/* 日期 */}
    <Form.Item
      name={['user', 'time']}
      label="开启时间"
      rules={[
        {
          required: true,
        },
      ]}
    >
      <Space direction="vertical" size={12}>
        <DatePicker showTime onChange={onChange} onOk={onOk} />
      </Space>
    </Form.Item>
    {/* 直播描述 */}
    <Form.Item name={['user', 'website']}
      label="直播描述">
      <Input onChange={(e) => {
        setothers(e.target.value)
      }} />
    </Form.Item>
    {/* 直播封面 */}
    <Form.Item
      name={['user', 'image']}
      label="直播封面"
      rules={[
        {
          required: true,
        },
      ]}
    >
      <Upload {...props}>
        <Button icon={<UploadOutlined onChange={(e)=>{
          setimg(e.target.value)
        }} />}>点击添加</Button>
      </Upload>
    </Form.Item>
    {/* 开启按钮 */}
    <Button type="primary" danger onClick={() => {
      getaddlist({ title, name, createtime, others, img }).then(res => {
        console.log(res);
        // history.push("/");
      })
    }}>
      开启直播
    </Button>
  </div>;
}

export default CreateLivePage;
